<template>
	<view class="container">

		<view class="nr-box">
			<u-cell-group>
				<u-cell title="头像" isLink>
					<!-- <u-icon slot="value" size="32" name="search"></u-icon> -->
					<button style="opacity: 0;right:20rpx;border: none;position: absolute;" type="balanced"
						slot="right-icon" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						88888
					</button>

					<u-avatar :src="user.avatar" slot="value"></u-avatar>



				</u-cell>
				<u-cell title="昵称" :value="user.nickname" @click="clickForm(1)" isLink></u-cell>
				<u-cell title="手机号" isLink v-if="user.mobile">
					<text slot="value">{{user.mobile}}</text>

				</u-cell>
				<u-cell title="手机号" isLink v-else @click="clickForm(2)">

					<text slot="value" style="color: blue;">点击绑定手机号</text>

				</u-cell>
				<u-cell title="身份" v-if="user.mobile">
					<text slot="value">{{user.position}}</text>
				</u-cell>
				<u-cell title="微信绑定" isLink>
					<text slot="value">
						<text v-if="user.unionid" @click="showBindOut = true">已绑定</text>
						<text v-else @click="showBind=true">去绑定</text>
					</text>
				</u-cell>
			</u-cell-group>
		</view>

		<u-popup :show="formShow" mode="center" :safeAreaInsetTop="true" @close="close" @open="open" closeable="true"
			:closeOnClickOverlay="false">
			<view class="client-box">
				<view class="form-box">
					<u--form :model="form" ref="uForm" :rules="rules">

						<u-form-item label="昵称" labelWidth="60" borderBottom v-if="formNum == 1">
							<u--input v-model="form.nickname" border="none"></u--input>
						</u-form-item>

						<u-form-item label="手机号" labelWidth="60" prop="mobile" borderBottom v-if="formNum == 2">
							<u--input v-model="form.mobile" border="none"></u--input>
						</u-form-item>
						<u-form-item label="验证码" labelWidth="60" prop="code" borderBottom v-if="formNum == 2">
							<u--input v-model="form.code" border="none"></u--input>
							<u-button slot="right" size="small" type="success" @tap="getCode">{{tips}}</u-button>
							<u-code :seconds="seconds" @end="end" @start="start" ref="uCode"
								@change="codeChange"></u-code>
						</u-form-item>
					</u--form>
					<view class="but">
						<u-button @click="submit" style="margin-top: auto;">提交</u-button>
					</view>
				</view>

			</view>
			<u-toast ref="uToast2"></u-toast>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
		<u-modal :show="showBind" title="微信绑定" :showCancelButton="true" content='确认要微信绑定？' @confirm="getWeachBind"
			@cancel="cancelBind"></u-modal>
		<u-modal :show="showBindOut" title="微信解绑" :showCancelButton="true" content='确认要解绑？' @confirm="getWeachBindOut"
			@cancel="cancelBindOut"></u-modal>
	</view>
</template>

<script>
	import {
		getUserProfile,
		uploadAvatar,
		updateUserProfile,
		getcodeSms,
		getBindMobile,
		wechatBind,
		wechatBindOut
	} from "@/api/system/user"
	import {
		setIsMobile,
		setToken,
		getIsMobile
	} from '@/utils/auth'
	import {
		mapMutations,
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				formShow: false,
				user: {},
				roleGroup: "",
				postGroup: "",
				formNum: 1,
				tips: '',
				// refCode: null,
				seconds: 60,
				form: {
					mobile: '',
					code: '',
					nickname: ''
				},
				code: '',
				rules: {
					// nickname: {
					// 	required: true,
					// 	message: '请输入昵称',
					// 	trigger: ['change', 'blur']
					// },
					mobile: {
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
					code: {
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}
				},
				showBind: false,
				showBindOut: false
			}
		},
		onLoad() {



		},
		created() {
			this.getUser()
		},
		methods: {
			getUser() {

				this.$store.dispatch('GetInfo').then(response => {

					this.user = response.data
					this.form.nickname = this.user.nickname
					this.SET_POSITION(this.user.position)
					this.SET_MOBILE(this.user.mobile)
					this.SET_NICKNAME(this.user.nickname)
					if (this.user.avatar) {
						this.SET_AVATAR(this.user.avatar)
					}
					// if (this.user.identity  == 0) {
					// 	//已绑定
					// 	setIsMobile(1)

					// }else{
					// 	setIsMobile(0)
					// }

				})

				// getUserProfile().then(response => {


				// })
			},
			open() {
				// console.log('open');
			},
			close() {
				this.formShow = false
				this.form = {
					mobile: '',
					code: '',
					nickname: ''
				}
				// console.log('close');
			},
			getWeachBind() {
				var that = this
				const data = {
					code: '',
				}
				uni.login({
					provider: 'weixin', //使用微信登录
					success: function(res) {
						var code = res.code
						data.code = code
						wechatBind(data).then(res => {
							if (res.code == 0) {

								uni.$u.toast('绑定成功');
								that.showBind = false
								that.$nextTick(function() {
									{
										that.getUser()
									}
								});
							}

						})
					}
				})


			},
			cancelBind() {
				this.showBind = false
			},
			getWeachBindOut() {
				var that = this
				wechatBindOut().then(res => {
					if (res.code == 0) {
						uni.$u.toast('解绑成功');
						that.showBindOut = false
						that.$nextTick(function() {
							{
								that.getUser()
							}
						});
					}

				})


			},
			cancelBindOut() {
				this.showBindOut = false
			},
			onChooseAvatar(e) {

				var that = this

				const avatarUrl = e.detail.avatarUrl

				let data = {
					name: 'file',
					filePath: avatarUrl
				}
				//图片上传
				uploadAvatar(data).then(response => {
					if (response.code == 0) {
						var data = {
							avatar: response.data.url
						}
						that.updateUser(data)

					} else {
						that.$refs.uToast.show({
							type: 'error',
							message: '上传失败'
						})
					}


					// store.commit('SET_AVATAR', baseUrl + response.imgUrl)
					// uni.showToast({ title: "修改成功", icon: 'success' })
					// uni.navigateBack()
				}).catch(error => {



				})


				this.user.avatar = avatarUrl
			},
			updateUser(data) {
				var that = this
				updateUserProfile(data).then(res => {

					if (res.code == 0) {
						that.getUser()
						that.form = {}
						that.$refs.uToast2.show({
							type: 'success',
							message: '操作成功',
							complete() {
								that.formShow = false
							}

						})

					}

				})

			},
			submit() {
				var that = this

				that.$refs.uForm.validate().then(res => {

					if (that.formNum == 1) {

						var data = {
							nickname: that.form.nickname,
						}
						//昵称更改
						that.updateUser(data)
					} else {
						//绑定手机号
						that.BindMobile();
					}



				}).catch(errors => {

				})
			},
			getMobileCode() {
				var that = this
				var data = {
					mobile: that.form.mobile,
					scene: "register"

				}
				getcodeSms(data).then(res => {
					if (res.code == 0) {

						that.$refs.uToast2.show({
							type: 'success',
							message: '发送成功'
						})
					}

				})

			},
			BindMobile() {

				var that = this
				var data = {

					mobile: that.form.mobile,
					code: that.form.code,
					identity: 2
				}
				getBindMobile(data).then(res => {
					if (res.code == 0) {

						uni.$u.toast('绑定成功');
						that.formShow = false
						setIsMobile(1)
						setToken(res.data.token)
						that.$nextTick(function() {
							{
								that.getUser()
							}
						});

					}

				})


			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {

				if (!this.form.mobile) {
					uni.$u.toast('请先输入手机号');
					return false

				}
				if (!uni.$u.test.mobile(this.form.mobile)) {
					uni.$u.toast('请输入正确手机号');
					return false

				}

				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						// uni.$u.toast('验证码已发送');
						this.getMobileCode()
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				// uni.$u.toast('倒计时结束');
			},
			start() {
				// uni.$u.toast('倒计时开始');
			},
			clickForm(num) {

				this.formShow = true
				this.formNum = num
			},
			...mapMutations([
				"SET_POSITION",
				"SET_MOBILE",
				"SET_NICKNAME",
				"SET_AVATAR",

			])
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.nr-box {

		width: 95%;
		margin: 0 auto;
		padding: 30rpx 0rpx;
		background-color: #fff;
	}

	.client-box {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		width: 650rpx;
		padding: 20rpx 0px;

		.form-box {
			padding: 0rpx 20px;
			position: relative;
		}

		.but {

			margin-top: 100rpx;
		}

	}
</style>